<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head th:replace="nav :: navHeaderIFrameItem(~{::title})">
    <title>token编辑功能</title>
</head>
<body>
    <div id="form_win">
        <form class="layui-form" lay-filter="formData" >
            <div class="layui-form-item layui-hide">
                <label class="layui-form-label">id</label>
                <div class="layui-input-block">
                    <input type="text" name="id"  placeholder="id" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">token</label>
                <div class="layui-input-inline token_text">
                    <input type="text" name="token" placeholder="token" autocomplete="off" class="layui-input" lay-verify="required" readonly>
                </div>
                <div class="layui-input-inline">
                    <button type="button" id="createToken" class="layui-btn layui-btn-normal">生成token</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">业务类型</label>
                <div class="layui-input-block">
                    <input type="text" name="bizType" placeholder="业务类型" autocomplete="off" class="layui-input" lay-verify="required" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">应用名</label>
                <div class="layui-input-block">
                    <input type="text" name="bizName" placeholder="应用名" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门名称</label>
                <div class="layui-input-block">
                    <input type="text" name="deptName" placeholder="部门名称" autocomplete="off" class="layui-input" lay-verify="required" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">负责人</label>
                <div class="layui-input-block">
                    <input type="text" name="ownerName" placeholder="负责人" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">负责人邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="ownerEmail" placeholder="负责人邮箱" autocomplete="off" class="layui-input" lay-verify="required|email">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="isDisabled" value="0" title="启用" >
                    <input type="radio" name="isDisabled" value="1" title="禁用">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea  name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <div th:include="nav::navFooterIFrameItem" ></div>
    <script type="text/javascript" th:src="@{../../../js/crypto-js.js}"></script>
    <script>

        //此处采用路径截取方式（可以采用thymeleaf方式）
        let url= document.location.href;
        let urlList = url.split('/');
        let id = urlList[urlList.length-1];

        layui.use('form', function(){
            let form = layui.form,
                $ = layui.$;

            //点击生成token
            $('#createToken').on('click', function(){
                //加密
                let date = new Date().getTime()+"";
                let encrypt=CryptoJS.AES.encrypt(date,"1234567890");
                $('input[name="token"]').val(encrypt);
            });

            //初始化数据
            $.ajax({
                type: "get",//方法类型
                url: "/token/detail/"+id,
                dataType: "json",//预期服务器返回的数据类型
                success:function(result){
                    let data = result.data;
                    if(result.code===0){
                        $('input[name=isDisabled][value='+(data.isDisabled?"1":"0")+']').attr("checked",true);
                        data.isDisabled = data.isDisabled? 1:0;
                        form.val('formData',data);
                        form.render(); //更新全部
                    }else{
                        top.layer.msg(result.msg, {
                            icon: 2,
                            time: 3000 //如果不配置，默认是3秒
                        });
                    }
                },
                error : function(e){
                    top.layer.msg('服务异常');
                }
            });

            //表单验证
            form.verify({
                email: function(value){
                    if(value.length < 7){
                        return '邮箱至少得7个字符啊';
                    }
                    let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                    if(reg.test(value)){
                    }else{
                        return '邮箱格式不正确';
                    }
                }
            });

            //监听提交
            form.on('submit(formDemo)', function(data){
                const index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
                data.field.isDisabled = data.field.isDisabled === "1" ? 1:0;
                //ajax请求的参数直接用data.field获取表单里含有name属性的元素的值
                //修改数据
                $.ajax({
                    type: "put",
                    url: "/token/update",
                    data:JSON.stringify(data.field),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success:function(result){
                        top.layer.close(index);
                        if(result.code===0){
                            close_layer();
                            top.layer.msg("修改成功");
                        }else{
                            top.layer.msg(result.msg, {
                                icon: 2,
                                time: 3000 //如果不配置，默认是3秒
                            });
                        }
                    },
                    error : function(e){
                        top.layer.close(index);
                        top.layer.msg('服务异常');
                    }
                });
                return false;
            });
            //关闭弹窗
            function close_layer() {
                let index = parent.layer.getFrameIndex(window.name);
                parent.window.frames["winCon"].layui.table.reload('tableData');
                parent.layer.close(index);
            }
        });

    </script>
</body>
</html>